
<script setup lang='ts'>
import { useLang, type LangName } from '@/hooks/useLang'
import { useI18n } from "vue-i18n";
const { langList, ActiveLangName, setLang} = useLang()
const { locale } = useI18n();
/** 选择语言 */ 
const handleSetLang = (name:LangName)=>{
    locale.value = name
    setLang(name)
}
</script>




<template>
    <el-dropdown trigger="click" @command="handleSetLang">
        <div>
        <el-tooltip effect="dark" :content="$t('other.internationalizationLang')" placement="bottom">
            <svg-icon name="language" />
        </el-tooltip>
        </div>
        <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item
                v-for="lang in langList"
                :key="lang.name"
                :disabled="ActiveLangName === lang.name"
                :command="lang.name"
            >
            <span>{{ lang.title }}</span>
            </el-dropdown-item>
        </el-dropdown-menu>
        </template>
    </el-dropdown>


</template>

<style lang='scss' scoped>
.svg-icon {
  font-size: 20px;
  &:focus {
    outline: none;
  }
}
</style>